<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> 
    <head>
        <title>Generator</title>
        <style type='text/css'>
            pre {
                text-align: left;
                border: 1px solid black;
                width: 600px;
                padding-left: 10px;
                padding-top: 10px; padding-bottom: 10px; padding-right: 10px;
            }
            a.navigator {
                height: 100%;
                border: 1px solid red;
            }
            a#previous.navigator{
                float: left;
            }
            a#next.navigator {
                float: right;
            }

        </style> 

        <script type='text/javascript' src='../ComicReader/mootools-1.3.js'></script>
        <script type='text/javascript' src='../ComicReader/tools.js'></script>
        <script type='text/javascript' src='../ComicReader/Comic.js'></script>
        <script type='text/javascript' src='../ComicReader/Pagina.js'></script>
        <script type='text/javascript' src='./Pagina+Generator.js'></script>
        <script type='text/javascript' src='./TextEditor.js'></script>
        <script type='text/javascript' src='./Generator.js'></script>
    
        <script type='text/javascript'>
            function abs(n) {
                return (n < 0)?-n:n;
            }

            window.addEvent('load', function(e) {
                var prefix = prompt('Prefijo de la página');
                var generator = new Generator($('p08'), prefix);

                $('clickme').addEvent('click', function(e) {
                    generator.codeToLoadPageInElement($('coordenadas'), 'pagina');
                });

                var detecting_collitions = false;
                $('toggle_preview').addEvent('click', function(e) {
                    if(detecting_collitions){
                        generator.comic.stopDetectCollitions();
                        detecting_collitions = false;
                        this.set('text', "Mostrar Diálogos");
p                   }else{
                        generator.comic.beginDetectCollitions();
                        detecting_collitions = true;
                        this.set('text', "Dejar de mostrar diálogos");
                    }
                });

                $('next').addEvent('click', function(e){
                    generator.editNextPage();
                });

                $('previous').addEvent('click', function(e){
                    generator.editPreviousPage();
/*
                    (new Element('div', {
                        id: 'divid',
                        text: 'Ahora que estoy solo',
                        styles: {
                            position: 'absolute',
                            top: '100px',
                            left: '250px',
                            border: '1px solid white',
                            height: '100px',
                            width: '32px',
                            'background-color': 'red'
                        }
                    })).inject(document.body);
*/
                });
        });

        </script>
    </head>
    <body id='aBody'>
                <div id='container'></div>
        <center>
            <a id='previous' class='navigator'>&lt;&lt;</a>
            <a id='next' class='navigator'>&gt;&gt;</a>
            <img height="90%" src='./Vairoleto/05.jpg' alt='Una imagen' id='p08' />
            <a href='#' id='clickme'>click me</a><br />
            <a href='#' id='toggle_preview'>Mostrar dialogos</a>
            <pre id='coordenadas'>coordenadas</pre>
        </center>
<!--
        <input type='text' id='unid' />
        <a id='click_unid' href='#'>mostrar imagen </a>
-->

    </body>
</html> 
